<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/pro/css/buy/cart2.e3e13dad.css">
    <script src="../js/vue.js"></script>
    <style>
        body {
            padding: 10px;
        }

        .checkbox {
            display: inline-block;

        }

        .checkbox .iconfont {
            display: block;
            font-style: normal;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            border: 1px solid #e0e0e0;
            user-select: none;
            color: #fff;
        }

        .checkbox .iconfont:hover {
            color: #757575;
        }

        .checkbox input:checked+.iconfont {
            background-color: #ff6700;
            border-color: #ff6700;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <div>
            <p>{{count}}</p>
            <button>点击</button>
        </div> -->

        <my-color></my-color>
        <my-article></my-article>


    </div>
</body>
<template id="myColor">
    <div>
        <input type="color" :value="color" @input="changeColor">
    </div>
</template>

<template id="myArticle">
    <div class="article" :style="{color:color,width:'400px'}">
        <p>
            Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue
            的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
        </p>
    </div>
</template>

<script>

    // 需求:
    // 当myColor组件中颜色发生改变  myArticle组件中字体颜色也跟着改变 
    // => 期望myColor组件中颜色发生改变 将数据传递给myArticle

    // 非父子组件之间的通信:
    // 1. 通过 $parent $root $children $ref  配合实现组件通信
    // 2. 如果通信的组件是兄弟组件  => 找到他们共同的父组件 (转化为父子通信)
    // 3. EventBus(事件总线)   => 原理:自定义事件 (需要接收数据的组件绑定自定义事件 需要传递数据的组件触发自定义事件)
    // 4. provide inject


    var bus = new Vue();  // 新建Vue实例 => 不和页面绑定 只是单纯了为了使用 $on()  $emit()


    Vue.component("my-color", {
        data() {
            return {
                // 注意: 颜色不能简写
                color: "#666666"
            }
        },
        template: "#myColor",
        methods: {
            changeColor(e) {
                this.color = e.target.value; //先改自己的
                bus.$emit("changeArticleColor", e.target.value);
            }
        },
        watch: {
            color(newVal) {
                console.log("color发生改变", newVal);
            }
        }
    })
    Vue.component("my-article", {
        data() {
            return {
                // 注意: 颜色不能简写
                color: "#666666"
            }
        },
        template: "#myArticle",
        watch: {
            color(newVal) {
                console.log("color发生改变", newVal);
            }
        },
        mounted() {
            // 自定义事件 =>改变color
            bus.$on("changeArticleColor", (v) => {
                this.color = v;
            })
        }
    })


    var vm = new Vue({
        el: "#app",
        data: {
            count: 1,
            bool: true,
        },
        watch: {
            bool(newVal) {
                console.log("bool发生改变", newVal);
            }
        },
        methods: {
        },
    })

</script>

</html>